<template>
  <a-layout id="components-layout-demo-custom-trigger"  class='h-100'>
    <!-- 左侧菜单 s -->
    <a-layout-sider  v-if='!isMobile'  
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo">
        <a-icon type="safety"  class='header-logo' />    
        <span  v-show='!collapsed'>铭帛后台系统</span>    
      </div>
      <a-menu  theme="dark" mode="inline" v-model='currentMenu' :openKeys="openKeys"  @openChange="onOpenChange"  >
        <template v-for='(item,index) in  menudata'>
            <a-menu-item  :key="index"  v-if='!item.children'>
              <router-link  :to='item.to'>
                <a-icon  :type="item.icon" class='ft16'/><span>{{item.name}}</span>
              </router-link>
            </a-menu-item>
            <a-sub-menu :key="index"  v-if='item.children'>
              <span slot="title"><a-icon  :type="item.icon"  :style="{ fontSize: '16px'}"/><span>{{item.name}}</span></span>
              <template v-for='(nav,ind) in  item.children'>
                <!-- sub-menu下的key 规律 0sub0 -->
                <a-menu-item  :key='subindex(index,ind)'>
                  <router-link  :to='nav.to'>
                    <a-icon  :type="nav.icon"  :style="{ fontSize: '16px'}"/><span>{{nav.name}}</span>
                  </router-link>
                </a-menu-item>
              </template>
            </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <!-- 左侧菜单 e -->

    <a-layout>
      <!-- header s-->
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon  v-if='!isMobile'
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <a-icon  v-if='isMobile'
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="drawerShow = !drawerShow"
        />
        <div  class='fr  h-100  header-right'>
          <!-- 消息，待办 -->
          <a-dropdown  :trigger="['click']"  v-model="visible">
              <span  class='right-index'>
                <a-badge :count="2"><a-icon type="bell"  :style="{ padding:'6px',fontSize: '16px'}" /></a-badge>
              </span> 
              <a-menu slot="overlay"  >
                  <!-- tab -->
                  <a-tabs defaultActiveKey="1"   :tabBarStyle="{marginBottom:'0',textAlign:'center'}">
                    <!-- tab-通知 -->
                    <a-tab-pane tab="通知(4)" key="1">
                        <!-- 通知list -->
                        <a-list
                          itemLayout="horizontal"
                          :dataSource="testdata"
                        >
                          <a-list-item slot="renderItem" slot-scope="item, index"  class='info_listItem'>
                            <a-list-item-meta  description="2019/09/19 9:19:30" >
                              <a slot="title" href="">{{item.title}}</a>
                              <a-avatar slot="avatar" :src="item.imgsrc" />
                            </a-list-item-meta>
                          </a-list-item>
                          <div slot="footer">
                              <a-menu-divider />
                              <a-menu-item  class='fr  pr20'>
                                <a href="javascript:;"  >查看更多&gt;&gt;</a>
                              </a-menu-item>
                          </div>
                        </a-list>
                    </a-tab-pane>
                    <a-tab-pane tab="待办" key="2" forceRender  align='center'>
                      <a-icon type="exclamation-circle"  :style="{ fontSize:'60px',padding:'6px',marginTop:'60px',color:'#ccc'}"/>
                      <h4>暂无数据</h4>
                    </a-tab-pane>
                  </a-tabs>
              </a-menu> 
          </a-dropdown>
          <!-- 当前登录用户 -->
          <a-dropdown  >
              <span  class='right-index'>
                <a-avatar style="backgroundColor:#87d068" icon="user"  size="small" />  {{username}}
              </span>
              <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">1st menu item</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">2nd menu item</a>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item>
                    <a href="javascript:;"  @click='exitLogin()'><a-icon type="poweroff" :style="{ padding:'6px' }"/>退出登录</a>
                  </a-menu-item>
              </a-menu>
          </a-dropdown>
          <!-- global -->
          <a-dropdown  >
              <span  class='right-index'><a-icon type="global"   :style="{ fontSize: '16px'}" /></span>
              <a-menu slot="overlay">
                  <a-menu-item  v-for='(item,index) in  language'  :key='index'  @click='changeLocale()'>
                     {{item.name}}
                  </a-menu-item>
                  <!-- <a-menu-item>
                    <a href="javascript:;">HK 繁体中文</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">GB English</a>
                  </a-menu-item> -->
              </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <!-- header e-->
      <!-- 面包屑 s-->
      <a-row  class='breadmenu'  v-if='$route.path != "/home/tendency"'>
          您当前所在位置：
        <a-breadcrumb :routes="routes">
          <template slot="itemRender" slot-scope="{route, params, routes, paths}">
            <!-- 最后一级 -->
            <span v-if="routes.indexOf(route) === routes.length - 1">
              {{route.name}} 
            </span>
            <!-- 前置级 -->
            <router-link v-else :to="route.path">
              {{route.name}}
            </router-link>
          </template>
        </a-breadcrumb>

        <!-- <span  @click='goback'>返回</span> -->
      </a-row>
      <!-- 面包屑 e-->
      <a-layout-content :style="{ margin: '10px 0', padding: '24px', background: '#fff', minHeight: '280px' }"  class='overflowy'>
        <a-locale-provider :locale="locale">

        <router-view></router-view>

        <!-- <keep-alive  :include="cacheRoute"  :max="1"><router-view  v-if='$route.meta.keepAlive' /></keep-alive> -->
        <!-- <router-view v-if='!$route.meta.keepAlive' /> -->
      </a-locale-provider>
      </a-layout-content>
    </a-layout>
    <!-- 抽屉 -->
    <a-drawer  v-if='isMobile'
      placement="left"
      :closable="false"
      @close="drawerShow = false"
      :visible='drawerShow'   wrapClassName='drawer_menu'
    >
      <div class="logo">
        <a-icon type="safety"  :style="{ fontSize: '32px',paddingLeft:'8px'}"/>   
        <span  v-show='!collapsed'>融资交易系统</span>  
      </div>
      <a-menu theme="dark" mode="inline"  v-model='currentMenu'  :openKeys="openKeys"   @openChange="onOpenChange">
        <template v-for='(item,index) in  menudata'>
            <a-menu-item  :key="index"  v-if='!item.children'>
              <router-link  :to='item.to'>
                <a-icon  :type="item.icon"  :style="{ fontSize: '16px'}"/><span>{{item.name}}</span>
              </router-link>
            </a-menu-item>
            <a-sub-menu :key="index"  v-if='item.children'>
              <span slot="title"><a-icon  :type="item.icon"  :style="{ fontSize: '16px'}"/><span>{{item.name}}</span></span>
              <template v-for='(nav,ind) in  item.children'>
                <!-- sub-menu下的key 规律 0sub0 -->
                <a-menu-item  :key='subindex(index,ind)'>
                  <router-link  :to='nav.to'>
                    <a-icon  :type="nav.icon"  :style="{ fontSize: '16px'}"/><span>{{nav.name}}</span>
                  </router-link>
                </a-menu-item>
              </template>
            </a-sub-menu>
        </template>
      </a-menu>
    </a-drawer>
  </a-layout>
</template>

<script>
// import zhCN from 'ant-design-vue/locale-provider/zh_CN';
// import { Modal } from 'ant-design-vue';
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('en');
/*vuex*/
import { mapGetters }  from 'vuex'
export default {
  name: 'homeIndex',
  data () {

    return {
      /*static*/
      rootSubmenuKeys: [3,4,5],//（有子节点的）节点

      /*active*/
      collapsed: false,//左侧栏默认展开
      openKeys:[],//当前展开的（有子节点的）节点
      currentMenu:[0],//当前绑定节点，不分父节点或子节点
      //左侧栏菜单data
      // menudata:[
        // {name:'工作台',icon:'home',to:'/1',children:[
        //     {name:'项目趋势',icon:'pie-chart',to:'/home/tendency'},
        //     {name:'我的待办',icon:'compass',to:'/home/todolist'},
        // ]}, 
        // {name:'项目管理',icon:'project',to:'/project'}, 
        // {name:'订单管理',icon:'ordered-list',to:'/order'},
        // {name:'供应商管理',icon:'shopping-cart',to:'/supplier'},
        // {name:'买方管理',icon:'shop',to:'/buyer'},
        // {name:'CRM',icon:'idcard',to:'/2',children:[
        //     {name:'客户管理',icon:'idcard',to:'/customer'},
        //     {name:'客户联系记录',icon:'solution',to:'/contact'},
        // ]},
        // {name:'系统管理',icon:'appstore',to:'/3',children:[
        //     {name:'用户管理',icon:'team',to:'/system/userlist'},
        //     {name:'角色管理',icon:'user-add',to:'/system/character'},
        //     {name:'权限管理',icon:'key',to:'/system/jurisdiction'},
        //     {name:'区块链管理',icon:'branches',to:'/system/blockchain'},
        // ]},
      // ],

      visible:false,//消息默认不显示
      //消息data
      testdata:[
          {
            title: '项目va-li已收款',imgsrc:'static/img/icon_gain.png'
          },
          {
            title: '项目va-li已立项',imgsrc:'static/img/icon_project.png'
          },
          {
            title: '项目va-li已发货',imgsrc:'static/img/icon_fahuo12.png'
          },
          {
            title: '项目va-li已付款',imgsrc:'static/img/icon_pay.png'
          },
        ],
      //左侧栏pc显示 or 抽屉显示
      isMobile:false,
      drawerShow:false,
      
      //面包屑data
      routes: [{
          path: '/home/tendency',
          name: '首页'
        }],

      //语言包
      language:[
          {name:'CN 简体中文'},
          {name:'HK 繁体中文'},
          {name:'GB English'},
      ],
      locale: null,
    }
  },
  created(){
      /*页面刷新时，导航设置为原位置*/
      let current_route = this.$route
      let pathArr = current_route.path.split('/')
      //1.面包屑
      let breadtitle = current_route.meta.title
      //当前2级以上菜单 /项目/新增
      if(breadtitle.indexOf('/')!=-1){
          //首页路由 固定设置
          let route_length = current_route.length
          this.routes.splice(1,route_length-1)//将routes只保留第一项

          let titleArr = breadtitle.split('/')//['项目','新增']
          let path = ''
          titleArr.forEach((item,index)=>{
            path += '/'+pathArr[index+1]
            this.routes.push({
              path:path,  //  /project  /project/add 
              name:item
            })
          })
      }
      else{    //项目
            this.routes.push({path:current_route.path,name:current_route.meta.title})
      }

      //2.刷新后，左侧栏导航仍在原位置
      this.menudata.forEach((item,index)=>{
        if(current_route.path == '/home/tendency'){
            //设置绑定子节点
              this.currentMenu.splice(0,1,'0sub0')
              //设置带有子节点展开的父节点
              this.openKeys.splice(0,1,0)
              return 
          }
        //无子导航
        if(!item.children){
            if(item.to == '/'+pathArr[1]){
              this.currentMenu.splice(0,1,index)
            }
        }
        //有子导航
        else{
          item.children.forEach((it,ind)=>{
            if(it.to == '/'+pathArr[1]){
              let num = index+'sub'+ind
              this.currentMenu.splice(0,1,num)
              this.openKeys.splice(0,1,index)
            }
          })
        }
      })
    
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    // 含有子菜单的菜单栏 
    onOpenChange (openKeys) {
      // console.log(openKeys)
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [0]
      }
    },
    //切换语言包
    changeLocale(e) {
      console.log(e)
      // const localeValue = e.target.value;
      // this.locale = localeValue
      // if (!localeValue) {
      //   moment.locale('en');
      // } else {
      //   moment.locale('zh-cn');
      // }
    },
    
    exitLogin(){
      sessionStorage.clear()

      this.$store.commit("setusername",'');
      this.$store.commit("setmenudata",[]);
      this.$router.push('/login')
    },

  },
  computed:{
    subindex(index,ind) {
        return function(value,val) {
            return value+'sub'+val
        }
    },
    ...mapGetters(['username','menudata','cacheRoute'])
    
  },
  watch:{
    //路跳转由时，重置路由设置
    '$route'(newVal,oldVal){
        // console.log(newVal)
        //面包屑导航点击首页时  跳转回项目趋势
        if(newVal.path == '/home/tendency'){
          //设置绑定子节点
            this.currentMenu.splice(0,1,'0sub0')
            //设置带有子节点展开的父节点
            this.openKeys.splice(0,1,0)
        }
        //首页路由 固定设置
        let route_length = this.routes.length
        this.routes.splice(1,route_length-1)

        let titleArr = newVal.meta.title.split('/')//title数组
        let pathArr = newVal.path.split('/')  //path数组

        let path = '' //需要设置初始值，否则会默认为undefined
        titleArr.forEach((item,index)=>{
            path += '/'+pathArr[index+1]//每一层的path 需加上上一层的path  
            // console.log(path)
            this.routes.push({
              name:item,
              path:path
            })
        })

        //根据path 设置左侧栏
        let current = newVal.path.split('/')[1]
        this.menudata.forEach((item,index)=>{
          //无子导航
          if(!item.children){
              if(item.to == newVal.path){
                this.currentMenu.splice(0,1,index)
              }
          }
          //有子导航
          else{
            item.children.forEach((it,ind)=>{
              if(it.to == '/'+current){
                let num = index+'sub'+ind
                this.currentMenu.splice(0,1,num)
                this.openKeys.splice(0,1,index)
              }
            })
          }
        })
        
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;line-height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
  color:#fff;
}
.header-right .right-index {display: inline-block; padding:0 12px;height: 100%;cursor: pointer;}
.header-right .right-index:hover {background:rgba(0,0,0,.025)}

/*左侧栏*/
.header-logo{font-size:28px;padding-left:8px;vertical-align:middle}

/*info_list-item*/
.info_listItem{padding:10px 20px; }
.ant-tabs-tabpane{min-height: 284px;}

/*breadmenu setting*/
.breadmenu{background-color: #fff;border-top:1px solid #eee;padding: 10px 20px;}
.ant-breadcrumb{display: inline-block;}
</style>
